<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				outline: none;
			}
			
			table {
				width: 800px;
				text-align: center;
				border-collapse: collapse;
				margin: 20px auto;
			}
			
			tr {
				height: 40px;
			}
			
			td {
				border: 1px solid #ccc;
			}
			
			td a {
				text-decoration: none;
				font-size: 14px;
				color: rgb(218, 176 ,0);
			}
			td input{width: 10px;height: 10px;margin-right: 5px;}
		
		</style>
	</head>
	<body>
		<div id="box">
			<table>
				<thead>
					<tr>
						<td>序号</td>
						<td>姓名</td>
						<td>学号/工号</td>
						<td>班级</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody v-html="stuData">
					<!-- <tr>
						<td>{{name()}}</td>
						<td></td>
						<td></td>
						<td></td>
						<td><a href="#" >移除</a></td>
					</tr> -->
				</tbody>
			</table>
		</div>
		
		<script>
			Vue.config.productionTip = false;
			new Vue({
				el: '#box',
				data: {
					studentData: [
						{
							name: '易心欣',
							studentID: '21805200120',
							class: '18高计应'
						},
						{
							name: '易欢',
							studentID: '21805200119',
							class: '18高计应'
						},
						{
							name: '夏盖资',
							studentID: '21805200116',
							class: '18高计应'
						},
						{
							name: '汤依丛',
							studentID: '21805200114',
							class: '18高计应'
						},
						{
							name: '骆鹏',
							studentID: '21805200112',
							class: '18高计应'
						},
						{
							name: '卢双禧',
							studentID: '21805200110',
							class: '18高计应'
						},
						{
							name: '林鑫',
							studentID: '21805200108',
							class: '18高计应'
						},
						{
							name: '甘思思',
							studentID: '21805200105',
							class: '18高计应'
						},
						{
							name: '樊家俊',
							studentID: '21805200104',
							class: '18高计应'
						},
						{
							name: '邓祖方',
							studentID: '21805200103',
							class: '18高计应'
						}
					]
				},
				created(){
					window.clickYiChu=this.clickYiChu
				},
				methods: {
					// 表格移除方法
					clickYiChu(i) {
						this.studentData.splice(i, 1);
						
					}
				},
				computed: {
					stuData() {
						let str=''
						for(let i=0;i<this.studentData.length;i++){
							str+=`<tr><td><input />${i+1}</td><td>${this.studentData[i].name}</td><td>${this.studentData[i].studentID}</td><td>${this.studentData[i].class}</td><td><a onclick='clickYiChu(${i})'>移除</a></td></tr>`
						}
						return str
						
					}
				},
				
			})
		</script>
	</body>
</html>